<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广告位申请</title>
    <link rel="stylesheet" href="/Public/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Public/lib/hplus/css/hplus.min.css">
    <link rel="stylesheet" href="/Public/lib/toastr/toastr.min.css">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools"></div>
                </div>
                <div class="ibox-content">
                    <form action='/admin/menumobile/edit' method="post" enctype="multipart/form-data" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="file_name" value="" placeholder="请输入名称...">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="file_type" value="" placeholder="请输入类型...">
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">描述</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="desc" value="" placeholder="请输入描述...">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图标</label>
                            <div class="col-sm-10">
                                <button class="btn btn-info" type="button" id="btnChoose">
                                    <span class="gyphicon glyphicon-cloud"></span> 选择图片
                                </button>

                                <button class="btn btn-info" type="button" id="btnUpload">
                                    <span class="glyphico glyhicon-upload"></span> 上传图片
                                </button>
                                <br/><span id="file-info"></span>
                                <br/><img src="<{$menu.logo}>" id="preview" style="width:200px;">
                                <input type="hidden" name="logo" id="logo" value="<{$menu.logo}>">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <input type="hidden" value="<{$menu.id}>" name="id">
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit" style="margin-right:20px;width:100px;">提交</button>
                                <button class="btn btn-white" type="submit" style="margin-left:20px;width:100px;">取消</button>
                            </div>
                        </div>
                    </form>
                    <input id="input-file" type="file" name="file" value="请上传图片" class="hidden" accept=""/>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/Public/lib/jquery/jQuery2.1.1.js"></script>
<script src="/Public/lib/toastr/toastr.min.js"></script>
<script>
    var inputFile = document.getElementById('input-file');
    var labelInfo = document.getElementById('file-info');
    var file;

    var friendlySize = function(size) {
        var kb = size / 1024;
        if(kb < 1) return size.toFixed(2) + 'b';
        var mb = kb / 1024;
        if(mb < 1) return kb.toFixed(2) + 'kb';
        var gb = mb / 1024;
        if(gb < 1) return mb.toFixed(2) + 'mb';
        return gb.toFixed(2) + 'gb'
    };

    document.getElementById('btnChoose').addEventListener('click', function () {
        inputFile.click();
    });

    inputFile.addEventListener('change', function(){
        var size = this.files[0].size;
        file = this.files[0];
        labelInfo.innerHTML = '<span class="font-bold">大小:</span>' + friendlySize(size);

        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);

    }, false);

    $('#btnUpload').click(function(){
        if(!file) {
            toastr.error('没有文件别瞎点');
            return;
        }

        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url:'/admin/bookshelf/upload',
            contentType:false,
            processData:false,
            data:formData,
            method:'POST',
            success:function(res) {
                if(res.status === 0) {
                    toastr.error(res.msg);
                } else {
                    $('#preview').attr('src', res.data.path);
                    $('#logo').val(res.data.path);
                    toastr.success('上传成功');
                }
            }
        });
    });


</script>
</body>
</html>
 